<template>
  <div id="ysDesc" >
    <div class="bg_navs">
        <div class="content_nav">
            <div class="swiper" id="ysDesc_swiper">
                <div class="item" v-for="(item,index) in list" :key="index">
                    <div class="info">
                        <div class="title" v-for="(items,indexs) in list[0].title" :key="indexs">{{items}}</div>
                        <div class="desc">{{list[0].desc}}</div>
                        <div class="label">
                            <span @click="selectPage(indexs)" v-for="(items,indexs) in list[0].label" :key="indexs" :style="{'background':active==indexs?'#fb5770':'#f3f4f6','color':active==indexs?'#fff':'#000'}">{{items}}</span>
                        </div>
                    </div>
                    <div class="img" :style="{'transform':'translate3d(0px,-'+(active*offsetHeight+(offsetHeight==240?60*active:0))+'px,0px)'}">
                        <img :src="item.mainPicUrl" alt="">
                    </div>
                </div>
            </div>
        </div>
        <div class="btn_nav">
            <Icon type="ios-arrow-up" size="20" custom ="img" :color="type =='0'? '#fb5770':'#424242'"/>
            <!-- <img :src="type=='0'?img.top1:img.top" alt=""> -->
            <div class="top" @click="handleNext(false)" @mouseover="handleShow(0,true)" @mouseout="handleShow(0,false)">上一页</div>
            <div class="top" @click="handleNext(true)" @mouseover="handleShow(1,true)" @mouseout="handleShow(1,false)" style="margin-bottom:10px">下一页</div>
            <Icon type="ios-arrow-down" size="20" custom ="img" :color="type =='1'? '#fb5770':'#424242'"/>
        </div>
    </div>
  </div>
</template>

<script>
import '@/assets/css/ysDesc.css'
export default {
  name: 'ysDesc',
  data () {
    return {
        offsetHeight:0,
        list:[{
            title:['自有数据分析中台','让内容营销更高效'],
            desc:'大数据内容营销管理中台，解决品牌复杂对接问题，让您流程操作无担忧',
            label:['入驻商家商品','招募达人审核','物流信息同步','线上快速审稿','内容数据跟踪'],
            mainPicUrl:require('@/assets/01/soluteTask/aaa1.png'),
        },
        
        {mainPicUrl:require('@/assets/01/soluteTask/aaa2.png')},
        {mainPicUrl:require('@/assets/01/soluteTask/aaa3.png')},
        {mainPicUrl:require('@/assets/01/soluteTask/aaa4.png')},
        {mainPicUrl:require('@/assets/01/soluteTask/aaa5.png')}],
        type:'-1',
        active:0,
        height:document.body.clientHeight || document.documentElement.clientHeight
    }
  },
  methods:{
      handleShow(type,e){
          if(e){
              this.type=type
          }else{
              this.type='-1'
          }
      },
      pageResize(){
          this.height=document.body.clientHeight || document.documentElement.clientHeight
            this.offsetHeight=document.getElementById('ysDesc_swiper').offsetHeight
      },
      _isMobile() {
        let flag = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)
        return flag;
      },
      handleLogin(){
         if (this._isMobile()) {
            this.$Modal.confirm({
                title: '提示',
                content: '暂不支持移动端设备,请到PC端打开',
                okText: '确定',
                cancelText: '取消'
            })
        }else{
            window.open('https://cloud.redsay.net/login/1')
        }
      },
      selectPage(e){
          this.active=e
      },
      handleNext(e){
        if(e){
            this.active=this.active==(this.list.length-1)?0:(this.active+1)
        }else{
            this.active=this.active=='0'?(this.list.length-1):(this.active-1)
        }
      }
  },
  created(){
  },
  mounted(){
    var that=this
    console.log(document.getElementById('ysDesc_swiper'))
    this.offsetHeight=document.getElementById('ysDesc_swiper').offsetHeight
    window.onresize = ()=>{
　　　　//调用methods中的事件
        that.pageResize();
    } 
  },
}
</script>